UIToolKitには TwoPaneSplitView
という便利Elementが存在しています
これを利用すると簡単にリスト&詳細Windowの実装ができるようになります
Document
https://docs.unity3d.com/Packages/com.unity.ui@1.0/api/UnityEngine.UIElements.TwoPaneSplitView.html
サイズ変更可能な2つの領域を持つViewElement 一つはサイズ固定で生成し、もう硬いお方はflex-growスタイルが1(残りのスペースを最大利用)適用されます また、必ず利用には2つの子要素が必要です
利用方法
簡単に挙動を確認できるようにスクリプトで生成してみました
以下のように生成し
var splitView = new TwoPaneSplitView(
fixedPaneIndex: 0, // 固定サイズとする箇所のIndex(0, 1...
fixedPaneStartDimension: 200, // 固定サイズの初期幅 or 高さ
TwoPaneSplitViewOrientation.Horizontal); // 分割方向
Add メソッドで表示する子要素を追加します。 以下サンプルコード
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using System.Collections.Generic;
public class TwoPaneSplitViewWindow : EditorWindow
{
private string[] _texts = new string[] { "Text01", "Text02" };
private ListView _listView;
private VisualElement _detailElement;
[MenuItem("Test/UI Toolkit/TwoPaneSplitViewWindow")]
public static void ShowExample()
{
TwoPaneSplitViewWindow wnd = GetWindow<TwoPaneSplitViewWindow>();
wnd.titleContent = new GUIContent("TwoPaneSplitViewWindow");
}
public void CreateGUI()
{
VisualElement root = rootVisualElement;
var splitView = new TwoPaneSplitView(
fixedPaneIndex: 0, // 固定サイズとする箇所のIndex(0, 1...
fixedPaneStartDimension: 200, // 固定サイズの初期幅 or 高さ
TwoPaneSplitViewOrientation.Horizontal); // 分割方向
root.Add(splitView);
// 1番目にはListViewでTextを並べる
{
_listView = new ListView(_texts, 30,
makeItem: () =>
{
var element = new VisualElement();
element.Add(new Label());
return element;
},
bindItem: (element, index) =>
{
element.Q<Label>().text = _texts[index];
})
{
reorderable = false,
focusable = true,
selectionType = SelectionType.Single
};
_listView.onSelectionChange += OnSelectItemChange;
splitView.Add(_listView);
}
// 2番目にはただ選択されたテキストを配置
{
_detailElement = new VisualElement();
_detailElement.Add(new Label());
splitView.Add(_detailElement);
}
}
/// <summary>
/// リストのアイテムが押された時
/// </summary>
/// <param name="list"></param>
private void OnSelectItemChange(IEnumerable<object> list)
{
OnDetailChange(_texts[_listView.selectedIndex]);
}
/// <summary>
/// 詳細テキストの変更
/// </summary>
private void OnDetailChange(string text)
{
_detailElement.Q<Label>().text = text;
}
}
(インデントずれすみません スペースとタブの混合)
以上で左に簡易表示としてリストを表示し、右側にその詳細を表示するViewが簡単にできました